<template>
  <div class="code-editor-wrapper">
    <div class="code-editor-icon">
      <Icon size="24px" @click="showEditor"><Code></Code></Icon>
    </div>
    <Modal
      v-model:active="isShow"
      title="脚本编辑器"
      no-footer
      hide-mask
      transfer
      draggable
    >
      <div id="editor-instance"></div>
      <div>
        <Button type="success" @click="runScript">运行</Button>
      </div>
    </Modal>
  </div>
</template>
<script setup lang="ts">
import { Modal, Button, Icon, Message } from "vexip-ui";
import { BaseEditor } from ".";
import { ref, nextTick } from "vue";
import { Code } from "@vexip-ui/icons";
import { _global } from "@/UI/store";

const isShow = ref(false);
let editor: BaseEditor;

function showEditor() {
  isShow.value = true;
  nextTick(() => {
    if (editor) return;
    editor = new BaseEditor();
    editor.createEditor(
      document.getElementById("editor-instance") as HTMLElement
    );
  });
}

function runScript() {
  _global.Engine.runScript(editor.value).then((res) => {
    Message.success("运行成功");
  });
}
</script>
<style lang="less" scoped>
.code-editor-wrapper {
  position: fixed;
  z-index: 10;
  bottom: 20px;
  right: 20px;
  display: flex;

  .code-editor-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
  }
}
#editor-instance {
  width: 400px;
  height: 300px;
}
</style>
